<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://eureka.yigolden.net/stringutils/sutaglib/1.0" prefix="su"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>大学寝室展示</title>

  <!-- Bootstrap -->
    <link href="<%=request.getContextPath()%>/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/static/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/static/css/jumbotron.css" rel="stylesheet">
    
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="<%=request.getContextPath()%>/static/js/html5shiv.min.js"></script>
      <script src="<%=request.getContextPath()%>/static/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<jsp:include page="../Common/navHeader.jsp"></jsp:include>

<div class="container">   

      <br>
	  <div class="row">
      <div class="col-xs-0 col-sm-2"></div><!--左侧不用-->
      
      <div class="col-xs-12 col-sm-8 text-center">
		  <div class="row">
		  	<div class="col-xs-1 col-sm-3"></div>
		  	<div class="col-xs-10 col-sm-6" style="">
		  		<br><br>
		  		<label>宿舍类型比例示意图</label>
		  		<canvas id="myChart" width="100%" height="100%"></canvas>
		  	</div>
		  	<div class="col-xs-1 col-sm-3"></div>
		  </div>
      </div>
      <div class="col-xs-0 col-sm-2"></div><!--右侧不用-->
    </div>
 
    <jsp:include page="../Common/Footer.jsp"></jsp:include>

</div>

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="<%=request.getContextPath()%>/static/js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<%=request.getContextPath()%>/static/js/bootstrap.min.js"></script>
    <script src="<%=request.getContextPath()%>/static/js/Chart.bundle.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	
		$.ajax({
			method: "POST",
			url: "<%= request.getContextPath()%>/Domitory/ShowDomitoryByChart",
			contentType : "application/json",
			dataType : "json",
			success: function(datareturn) {
				if (datareturn.status == 0) {
				  	var dataforchart = {
			    		    labels: datareturn.types,
			    		    datasets: [
			    		        {
			    		            data: datareturn.counts,
			    		            backgroundColor: datareturn.colors,
			    		            hoverBackgroundColor: datareturn.colors
			    		        }]
			    		};
			        var ctx = $("#myChart");
			        var myDoughnutChart = new Chart(ctx, {
			            type: 'pie',
			            data: dataforchart,
			            options: {
			            	 animation:{
			            	        animateScale:true
			            	    }
			            }
			        });
				} else {
					alert(datareturn.message);
				}
			},
			error: function() {
				alert("服务器连接失败！");
			},
			complete: function() {
			
				
			}
		});
    });
	

    </script>
	
</body>
</html>